<style scoped lang="scss">
.singleUpload-wrap {
  .upload-title {
    text-align: center;
    color: #666;
    padding: .2rem 0;
  }

  .upload-box {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .2rem 0;
    background-color: #fff;

    .preview {
      width: auto;
      height: 2.4rem;
      max-width: 100%;
    }
  }
}
</style>
<template>
  <div class="singleUpload-wrap">
    <div class="upload-title">{{ title }}</div>
    <div class="upload-box" :style="`pointer-events: ${readonly ? 'none' : 'default'}`">
      <van-uploader :after-read="afterRead" :max-size="maxSize * 1024 * 1024" @oversize="onOversize">
        <img class="preview" :src="image" v-if="!!image">
      </van-uploader>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SingleUpload',
  components: {},
  props: {
    title: {
      type: String,
      default: '请上传'
    },
    image: {
      type: String,
      default: null
    },
    maxSize: {
      type: Number,
      default: 2
    },
    readonly: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
    }
  },
  computed: {

  },
  methods: {
    afterRead(file) {
      this.$emit('update:image', file.content)
      this.$emit('handle-file', file)
    },
    onOversize() {
      this.$toast(`文件大小不能超过${this.maxSize}M`);
    }
  },

  watch: {}
}
</script>
